<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="催缴"
    @cancel="onClose"
    @before-ok="onConfirm"
    @close="onClose"
    width="45vw"
    unmount-on-close
  >
    <page-form :model="form" div="true" class="page-form" ref="formRef" layout="vertical">
      <a-row class="typeName">
        <a-col :span="3.2" class="typeNameLabel">催缴状态:</a-col>
        <span class="typeNameValue">{{ record.urgePayStatusName }}</span>
      </a-row>
      <a-row class="typeName2">
        <a-col :span="3.2" class="typeNameLabel">添加标签:</a-col>
      </a-row>
      <a-row style="margin-top: 8px; margin-bottom: 20px; padding-left: 10px">
        <a-checkbox v-model="form.cooperateHandleState">承租人不配合处理违章</a-checkbox>
      </a-row>
      <a-row class="typeName2">
        <a-col :span="3.2" class="typeNameLabel2">催缴说明</a-col>
      </a-row>
      <a-row style="margin-top: 8px; padding-left: 10px" v-for="(item, index) in form.pageList" :key="index">
        <a-textarea auto-size v-model="item.description" style="width: 280px" :max-length="300" placeholder="请输入" />
        <span v-if="record.urgePayStatus == 1">
          <a-button v-if="form.pageList.length > 1" type="text" style="color: #ea0000; margin-left: 4px" @click="handleRemove(index)">
            <template #icon>
              <icon-minus-circle />
            </template>
            <template #default>删除</template>
          </a-button>
          <a-button v-if="index === form.pageList.length - 1" type="text" style="color: #165dff; margin-left: 4px" @click="handleAdd">
            <template #icon>
              <icon-plus-circle />
            </template>
            <template #default>新增</template>
          </a-button>
        </span>
      </a-row>
      <span class="pb-4">
        <a-row class="feeItem" v-for="(ele, i) in form.descList" :key="i">
          <a-col :span="3.2" class="typeNameLabel">催缴说明:</a-col>
          <a-col :span="17">
            <div class="typeNameValue">{{ ele.description }}</div>
            <div class="descC">{{ ele.createUserName }} {{ ele.createTime }}</div>
          </a-col>
          <a-col :span="3">
            <span style="color: #ea0000; cursor: pointer" @click="handleDelete(i)">
              <icon-minus-circle />
              删除
            </span>
          </a-col>
        </a-row>
      </span>
    </page-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { checkCallRecord, saveCall } from '@/api/asset/carViolation'
  import { cloneDeep } from 'lodash-es'

  const form = ref({ pageList: [{ description: '' }], descList: [] })
  const showModal = ref(false)

  const record = ref({})
  const show = (e) => {
    record.value = e
    form.value.cooperateHandleState = e.cooperateHandleState == 0 ? true : false
    showModal.value = true
    if (e.id) {
      getList(e)
    }
  }

  const onClose = () => {
    showModal.value = false
    form.value = { pageList: [{ description: '' }], descList: [] }
  }

  const handleRemove = (i) => {
    form.value.pageList.splice(i, 1)
  }

  const handleAdd = () => {
    form.value.pageList.push({})
  }

  const handleDelete = (i) => {
    form.value.descList.splice(i, 1)
  }

  const getList = (e) => {
    checkCallRecord({ id: e.id }).then((res) => {
      if (res.code == 200) {
        form.value.violationId = res.result.violationId
        form.value.descList = res.result.urgeList || []
      }
    })
  }

  const emit = defineEmits(['ok'])
  const onConfirm = () => {
    let param = cloneDeep(form.value)
    param.urgeList = param.pageList.concat(param.descList)
    let result = {}
    result.violationId = param.violationId
    param.urgeList = param.urgeList.filter((item) => item.description)
    result.urgeList = param.urgeList
    result.cooperateHandleState = param.cooperateHandleState ? 0 : 1
    saveCall({ ...result }).then((res) => {
      Message.success(res.message)
      onClose()
      emit('ok')
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    min-height: 300px;
    max-height: 500px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .typeName {
    margin-bottom: 20px;
  }
  .typeNameLabel {
    font-size: 14px;
    font-weight: 400;
    color: #4e5969;
    line-height: 22px;
    text-align: left;
  }
  .typeNameValue {
    word-break: break-word;
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
  }
  .typeNameLabel2 {
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
  }
  .feeItem {
    min-height: 46px;
    margin-top: 16px;
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }
  .descC {
    margin-top: 4px;
    color: rgb(140, 147, 155);
  }
</style>
